<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
	template="template.xhtml">

	<ui:define name="content">

		<h:outputStylesheet target="head" library="css" name="no_border.css" />

		<h1>Add Place</h1>

		<h:form id="form" prependId="false">

			<p:growl id="messages" showDetail="true" life="3000" />

			<p:panel header="Place Info" name="addPlace">
				<p:panelGrid name="placeParameters">
					<p:row>
						<p:column style="width:60%">
							<p:panelGrid name="addPlacePanel" columns="2" style="width:100%">

								<p:outputLabel for="country" value="Country" />
								<p:autoComplete style="width:100%" id="country"
									value="#{addPlaceBean.country}"
									completeMethod="#{addPlaceBean.completeCountry}" global="false"
									forceSelection="true" />

								<p:outputLabel for="city" value="City" />
								<p:autoComplete style="width:100%" id="city"
									value="#{addPlaceBean.city}" forceSelection="true"
									completeMethod="#{addPlaceBean.completeCity}" global="false" />

								<p:outputLabel for="placeName" value="Place Name:" />
								<p:inputText style="width:100%" id="placeName"
									label="Place Name" value="#{addPlaceBean.placeName}"
									required="true">
									<f:validateLength minimum="2" />
								</p:inputText>

								<p:outputLabel for="tags" value="Tags:" />
								<p:autoComplete global="FALSE" id="tags"
									value="#{addPlaceBean.tags}" forceSelection="true"
									completeMethod="#{addPlaceBean.completeTags}" var="t"
									itemLabel="#{t}" itemValue="#{t}" converter="tagConverter"
									multiple="true" />
							</p:panelGrid>

							<p:commandButton value="Add" icon="ui-icon-check" update="form"
								style="margin:10px 0" action="#{addPlaceBean.addPlace}" />

						</p:column>
						<p:column>
							<p:gmap center="41.08545, 29.04450" zoom="17" type="HYBRID"
								id="map" widgetVar="mapWidget" style="width:600px;height:400px"
								model="#{addPlaceBean.map}"
								onPointClick="handlePointClick(event);">
							</p:gmap>
						</p:column>
					</p:row>
				</p:panelGrid>
			</p:panel>
			<h:inputHidden id="lat" value="#{addPlaceBean.latitude}" />
			<h:inputHidden id="lng" value="#{addPlaceBean.longitude}" />
		</h:form>

		<script type="text/javascript">
			var currentMarker = null;

			function handlePointClick(event) {
				document.getElementById('lat').value = event.latLng.lat();
				document.getElementById('lng').value = event.latLng.lng();

				// remove marker from the map
				if (currentMarker !== null) {
					currentMarker.setMap(null);
				}

				currentMarker = new google.maps.Marker({
					position : new google.maps.LatLng(event.latLng.lat(),
							event.latLng.lng())
				});
				PF('mapWidget').addOverlay(currentMarker);
			}
		</script>
	</ui:define>
</ui:composition>
